<script setup>
import { ref } from 'vue'
const uploadUrl = 'https://www.huohuo90.com:3005/upload'
const fileUrl = ref([])
const inputValue = ref('')
const clearDiary = () => {
  inputValue.value = ''
  fileUrl.value = []
}
</script>

<template>
<div class="addDiary">
  <yk-space dir="vertical" :size="2" style="width:100%">
    <yk-space class="add-content" dir="vertical" :size="16">
      <yk-space class="add-head" align="center" justify="between">
        <div class="add-title">正月廿三</div>
        <div class="add-wearther">
          <i class="qi-101-fill" style="font-size:18px;color:#feac28;"></i>
        </div>
      </yk-space>
      <textarea 
        class="add-content-input"
        type="text"
        v-model="inputValue"
        placeholder="请输入内容"
      />
      <yk-upload
        :upload-url="uploadUrl"
        :file-list="fileUrl"
        accept="image/*"
      ></yk-upload>
    </yk-space>
    <yk-space class="add-action" justify="end">
      <yk-button @click="clearDiary">清除</yk-button>
      <yk-button >新建笔记</yk-button>
    </yk-space>
  </yk-space>
</div>
</template>

<style scoped lang='less'>
.addDiary {
  .add-content {
    width: 100%;
    background-color: @bg-color-l;
    border-radius: 8px;
    padding: 24px;
    height: 660px;

    .add-head {
      width: 100%;

      .add-title {
        font-size: 24px;
        font-weight: 600;
      }
    }

    .add-content-input {
      width:100%;
      border:none;
      height:563px;
      resize: none;
      background-color: @bg-color-l;
      color:@gray-10;
    }
  }

  .add-action {
    width: 100%;
    background-color: @bg-color-l;
    border-radius: 8px;
    padding: 12px;
  }
}
</style>
